<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旅游</title>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/element/index.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/hzw-city-picker.css" />
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/element/index.js" type="text/javascript"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/city-data.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hzw-city-picker.min.js" type="text/javascript"></script>
		<script src="js/common.js" type="text/javascript"></script>
	</head>

	<body>
		<div id="container">
			<!-- 顶部菜单 start -->
			<el-row type="flex" justify="center" id="top-menu">
				<el-col :sm="16" class="top-container">
					<el-row>
						<el-col :sm="14">
							<span>您好，请<a href="javascript:;">登录</a></span> &nbsp;&nbsp;
							<a href="javascript:;">免费注册</a>
						</el-col>
						<el-col :sm="10" class="top-nav">
							<div>
								<a href="javascript:;" class="text-green bold">我的订单</a>
							</div>
							<el-dropdown>
								<span class="el-dropdown-link">
							    	客户服务<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>帮助中心</el-dropdown-item>
									<el-dropdown-item>在线服务</el-dropdown-item>
									<el-dropdown-item>人工申诉</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<el-dropdown>
								<span class="el-dropdown-link">
							    	合作中心<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>网站联盟</el-dropdown-item>
									<el-dropdown-item>品牌合作</el-dropdown-item>
									<el-dropdown-item>合作加盟</el-dropdown-item>
									<el-dropdown-item>门票合作</el-dropdown-item>
									<el-dropdown-item>商旅合作</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<div id="app">
								&nbsp;&nbsp;
								<i class="fa fa-mobile-phone fa-2x text-green" style="position: absolute;top: 3px;"></i> &nbsp;&nbsp;
								<div class="bg-yellow text-center">
									<h3>扫码下载APP</h3>
									<img src="img/QRcode.png" />
								</div>
							</div>
							<div id="wechat">
								<i class="fa fa-weixin fa-lg text-green"></i>
								<div class="bg-yellow text-center">
									<h3>扫码关注公众号</h3>
									<img src="img/QRcode.png" />
								</div>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- 顶部菜单 end -->

			<!-- LOGO及搜索 start -->
			<el-row type="flex" justify="center" id="logo-bar">
				<el-col :sm="16" class="">
					<el-row>
						<el-col :sm="4" class="text-center">
							<img src="img/logo.png" />
						</el-col>
						<el-col :sm="6" :offset="14">
							<img src="img/tel.png" style="width: 210px;display: block;margin: 0 auto;">
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- LOGO及搜索 end -->

			<!-- menu start -->
			<el-row type="flex" justify="center" id="menu-bar" class="bg-green">
				<el-col :sm="16">
					<el-menu :default-active="activeIndex" background-color="#24D197" text-color="#eeeeee" mode="horizontal" @select="handleSelect">
						<el-menu-item index="1">首页</el-menu-item>
						<el-submenu index="2">
							<template slot="title">酒店</template>
							<el-menu-item index="2-1">国内酒店</el-menu-item>
							<el-menu-item index="2-2">国际酒店</el-menu-item>
							<el-menu-item index="2-3">民宿客栈</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">机票</template>
							<el-menu-item index="3-1">国内机票</el-menu-item>
							<el-menu-item index="3-2">国际机票</el-menu-item>
						</el-submenu>
						<el-menu-item index="4">火车票</el-menu-item>
						<el-submenu index="5">
							<template slot="title">汽车票</template>
							<el-menu-item index="5-1">汽车票首页</el-menu-item>
							<el-menu-item index="5-2">团队包车</el-menu-item>
						</el-submenu>
						<el-submenu index="6">
							<template slot="title">景点</template>
							<el-menu-item index="6-1">国内景点</el-menu-item>
							<el-menu-item index="6-2">周边游</el-menu-item>
							<el-menu-item index="6-3">主题景点</el-menu-item>
							<el-menu-item index="6-4">包团定制</el-menu-item>
						</el-submenu>
						<el-submenu index="7">
							<template slot="title">出境游</template>
							<el-menu-item index="7-1">出境首页</el-menu-item>
							<el-menu-item index="7-2">跟团游</el-menu-item>
							<el-menu-item index="7-3">自由行</el-menu-item>
							<el-menu-item index="7-4">签证</el-menu-item>
						</el-submenu>
						<el-menu-item index="8">签证</el-menu-item>
						<el-submenu index="9">
							<template slot="title">定制旅游</template>
							<el-menu-item index="9-1">包团定制</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-col>
			</el-row>
			<!-- menu end -->

			<!-- 当前位置 start -->
			<el-row type="flex" justify="center" id="cur-position" class="bg-lightgray">
				<el-col :sm="16" class="">
					<el-col :sm="16">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/' }">
								<a href="javascript:;">首页</a>
							</el-breadcrumb-item>
							<el-breadcrumb-item>
								<a href="javascript:;">出境游</a>
							</el-breadcrumb-item>
							<el-breadcrumb-item>
								<a href="javascript:;">普吉岛旅游</a>
							</el-breadcrumb-item>
							<el-breadcrumb-item>
								<a href="javascript:;">普吉岛跟团游</a>
							</el-breadcrumb-item>
							<el-breadcrumb-item>
								<a href="javascript:;">【推荐】普吉岛4晚6日/5晚7日游</a>
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :sm="8">
						<span>本产品由同程国旅或其关联公司旅行社及具有资质的合作旅行社提供相关服务</span>
					</el-col>
				</el-col>
			</el-row>
			<!-- 当前位置 end -->

			<!-- 内容部分 start -->
			<el-row type="flex" justify="center" id="content" class="bg-lightgray">
				<el-col :sm="16">
					<!-- 标题 start -->
					<el-row class="title bg-white">
						<el-col :sm="24">
							<h2>【推荐】普吉岛4晚6日/5晚7日游</h2>
							<sub class="text-ml">承诺0自费，离岛长岛蓝湾连住，年轻天堂蓝钻岛，浮潜观鱼戏水，精油spa，升级海鲜大咖，全程三个购物店</sub>
						</el-col>
					</el-row>
					<!-- 标题 end -->

					<!-- 顶部面板 start -->
					<el-row class="top-panel bg-white">
						<el-col :sm="12" class="left-part">
							<template>
								<el-carousel :interval="4000" height="330px">
									<el-carousel-item v-for="item in 4" v-bind:style="{background : 'url(img/detail-slide/slide-' + item + '.png)'}">
									</el-carousel-item>
								</el-carousel>
							</template>
							<div class="tips">
								<span>
									<a href=""><i class="fa fa-star-o"></i>收藏</a>
								</span>
								<span>
									<a href=""><i class="fa fa-share-alt"></i>分享</a>
								</span>
								<span class="float-r">
									*提前预订时间：建议您至少提前2天预订 
								</span>
							</div>
							<img src="img/rili-temp.png" />
						</el-col>
						<el-col :sm="12" class="right-part">
							<div class="line-info">
								<ul class="clearfix">
									<li>
										<span>出游类型：</span>
										<em>跟团游</em>
									</li>
									<li>
										<span>出港城市：</span>
										<em>沈阳</em>
									</li>
									<li>
										<span>产品编号：</span>
										<em>323192</em>
									</li>
								</ul>
							</div>
							<!-- 展示信息 start -->
							<div class="declare-box">
								<div class="price-box">
									<span class="price">
										<i>¥</i><span>4999</span>/人起
									</span>
									<span class="reduced">
										<a href="">
											(降价通知)
										</a>
									</span>
									<span>
										<el-tooltip effect="light" placement="bottom-start">
											<div slot="content" style="line-height: 18px; color: #666666;">
												本起价是可选出发日期中，按双人出行共住一间房核算的最低单人价格。<br />
												产品价格会根据您所选择的出发日期、出行人数、入住酒店房型、航班<br />
												或交通以及所选附加服务的不同而有所差别。
											</div>
									    	<a href="" class="text-green">起价说明&nbsp;<i class="fa fa-info-circle text-ml"></i></a>
									    </el-tooltip>
									</span>
								</div>
								<div class="discounts">
									<span>可享优惠：</span>
									<div class="mini-group">
										<span>积分抵扣</span><span>抵100元/人</span>
									</div>
									<span class="mini-block bg-green">
										<el-tooltip effect="light" placement="bottom-start">
											<div slot="content" style="line-height: 18px; color: #666666;">
												<ol>
													<li>预订人点评审核通过后，获得20-50元不等的点评奖金，返还至您的奖金账户；</li>
													<li>每位同游人点评审核通过后，将获得10元点评奖金，返还至预订人奖金账户；</li>
													<li>如果预订人的点评足够细致、有特色，并且对行程有个人建议或者旅游攻略小贴士，<br />
													将很有机会被评为精华点评，奖金可是原预订人点评奖金的2倍哦！</li>
													<li>回团30天内点评有效。</li>
												</ol>
											</div>
									    	<a href="">点评返现</a>
									    </el-tooltip>
									</span>
								</div>
								<div class="tips">
									<p>*以上优惠适用于2017-12-24出游，其余日期的优惠规则详见价格日历</p>
								</div>
								<div class="service">
									<span>服务特色：</span> &nbsp;
									<i class="fa fa-check-square text-green text-ml"></i> &nbsp;
									<span>无自费</span> &nbsp;
									<i class="fa fa-check-square text-green text-ml"></i> &nbsp;
									<span>即时确认</span>
								</div>
							</div>
							<!-- 展示信息 end -->

							<!-- 按钮 start -->
							<div class="btn-box">
								<button class="el-button el-button--warning text-lg">立即预定</button>
								<div style="" class="float-r text-lg text-green">
									<i class="fa fa-phone"></i>
									<span>400-4000-400</span>
								</div>
							</div>
							<!-- 按钮 end -->

							<!-- 行程推荐 start -->
							<div>
								<div class="z-tip">
									<p>行程推荐</p>
								</div>
								<div>
									<ul class="z-route clearfix">
										<li>
											<strong>D1</strong>
										</li>
										<li>
											<strong>D2</strong>
										</li>
										<li>
											<span>攀牙湾</span>
										</li>
										<li>
											<span>割喉岛</span>
										</li>
										<li>
											<strong>D3</strong>
										</li>
										<li>
											<span>PP岛</span>
										</li>
										<li>
											<span>小PP岛环游、浮浅</span>
										</li>
										<li>
											<span>情人沙滩</span>
										</li>
										<li>
											<strong>D4</strong>
										</li>
										<li>
											<span>蓝钻岛</span>
										</li>
										<li>
											<strong>D5</strong>
										</li>
										<li>
											<span>庆祖庙</span>
										</li>
										<li>
											<span>神仙半岛</span>
										</li>
										<li>
											<span>四面佛</span>
										</li>
										<li>
											<strong>D6</strong>
										</li>
									</ul>
								</div>
							</div>
							<!-- 行程推荐 end -->

							<!-- 产品经理推荐 start -->
							<div class="recommend clearfix">
								<div class="z-tip">
									产品经理推荐
								</div>
								<div>
									<div class="img-box float-l">
										<img src="img/a9.jpg" />
										<p>Fairy</p>
									</div>
									<div class="content">
										劲爆活动,12~2月团期预售，全款报名第二人立减800；,特色体验,PP岛浮潜观鱼 情人沙滩戏水嬉戏；,绝色景点,攀牙湾+精油SPA+海龙寺祈福四面佛+神仙半岛；,风情感受,长岛蓝湾泳池别墅+海边沙滩酒店+一晚五钻酒店；,超值过瘾,1~2月行程升级全程仅3个购物店 升级海鲜大咖；
									</div>
								</div>
							</div>
							<!-- 产品经理推荐 end -->

							<!--用户点评 start-->
							<div class="comment">
								<div class="z-tip">
									用户点评
								</div>
								<div>
									<div class="img-box float-l">
										<img src="img/a8.jpg" />
										<p>李*</p>
									</div>
									<div class="content">
										很棒的一次旅行，领队全程陪同认真负责，导游阿仓很有幽默感，每一个景点都给我们讲解历史，让我们更加充分的了解这个美丽的国家，这里的居民大多数都会几句简单的中文，沟通起来不是那么麻烦，挺方便。 第一天坐飞机好累的，下半夜到...
									</div>
								</div>
							</div>
							<!--用户点评 end-->
						</el-col>
					</el-row>
					<!-- 顶部面板 end -->

					<!-- 订购框 start -->
					<el-row class="order-box">
						<el-col :span="24" class="bg-white">
							<div>
								<el-form :inline="true">
									<el-form-item label="出发日期">
										<el-date-picker type="date" placeholder="选择日期">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="成人：">
										<el-input-number v-model="num1" @change="handleChange" :min="1" :max="50"></el-input-number>
									</el-form-item>
									<el-form-item label="儿童：">
										<el-input-number v-model="num2" @change="handleChange" :min="0" :max="50"></el-input-number>
									</el-form-item>
									<el-form-item>
										<el-button type="warning" @click="onSubmit">立即预定</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-col>
					</el-row>
					<!-- 订购框 end -->

					<!-- 详细信息 start -->
					<el-row class="detail-info">
						<el-col :span="24" class="bg-white">
							<div class="top-menu">
								<ul class="clearfix">
									<li>
										<a href="" class="active"><span>优惠信息</span></a>
									</li>
									<li>
										<a href=""><span>行程介绍</span></a>
									</li>
									<li>
										<a href=""><span>费用包含</span></a>
									</li>
									<li>
										<a href=""><span>签证信息</span></a>
									</li>
									<li>
										<a href=""><span>预订须知</span></a>
									</li>
									<li>
										<a href=""><span>出游须知</span></a>
									</li>
									<li>
										<el-badge :value="12" class="item">
											<a href="">
												<span>用户点评</span>
											</a>
										</el-badge>
									</li>
								</ul>
							</div>

							<div class="detail">
								<!-- 优惠信息 start -->
								<div class="discounts">
									<div class="tip">
										<p><i class="el-icon-star-on"></i>优惠信息</p>
									</div>
									<div class="dis-content">
										<div class="dis-item">
											<div>
												<span class="mini-block bg-green">积分抵扣</span>
											</div>
											<div>
												<p>名称：华北东南亚2倍积分抵扣</p>
												<p>时间：2017-01-01 00:00:00-2019-12-31 23:59:59</p>
												<p>内容：1.显示“百旅会”标识的产品，百旅会VIP会员均可使用专属积分抵扣部分订单金额，该优惠与其他优惠不可同时享受，最终抵扣额度以订单成功创建为准；</p>
												<p>2.积分抵扣以人为单位，账户所剩积分须高于订单所有人的抵扣积分总和，才可使用此优惠。当前显示额度，仅为推荐，具体抵扣额度随出游日期变动。请选择日期后，到订单填写页的“优惠详情”模块查看并选择；</p>
												<p>3.如有疑问，拨打百旅会专属热线：4001-807-777</p>
											</div>
										</div>
										<div class="dis-item">
											<div>
												<span class="mini-block bg-green">立减优惠</span>
											</div>
											<div>
												<p>名称：双成人立减800</p>
												<p>时间：12月 12/24 、 12/25 、 12/30 、 12/31</p>
												<p>内容：1.双旦+春节预售双成人下单立减800元。</p>
												<p>2.提交订单时，勾选“立减优惠”即可扣减相应金额，保险不含。</p>
												<p>3.本活动名额有限，售完即止，不与其他任何立减活动同享，不与回团立返同享。</p>
											</div>
										</div>
									</div>
								</div>
								<!-- 优惠信息 end -->

								<!-- 行程介绍 start -->
								<div class="route">
									<div class="tip">
										<p><i class="el-icon-star-on"></i>行程介绍</p>
									</div>
									<div class="route-content">
										<div class="reference">
											<div class="z-tip">参考行程</div>
											<el-alert title="*本线路属于多版本行程，团期不同行程会有不同，请注意选择！" type="error" :closable="false">
											</el-alert>
											<ul class="clearfix">
												<li class="active">
													<a href="">
														<p>A行程</p>直飞</a><i class="el-icon-success"></i>
												</li>
												<li>
													<a href="">
														<p>B行程</p>广州转机</a><i class="el-icon-success"></i>

												</li>
												<li>
													<a href="">
														<p>C行程</p>曼谷转机5晚7</a><i class="el-icon-success"></i>

												</li>
												<li>
													<a href="">
														<p>F行程</p>广州转机</a><i class="el-icon-success"></i>
												</li>
												<li>
													<a href="">
														<p>G行程</p>曼谷转机5晚7</a><i class="el-icon-success"></i>
												</li>
											</ul>
											<div class="ref-content bg-lightgray">
												<p>行程天数: 8天6晚</p>
												<p>使用团期:【2018年02月】2018-02-11</p>
											</div>
										</div>
										<div class="flight">
											<div class="z-tip">航班信息</div>
											<el-alert title="*受时差影响，航班显示的起飞和降落时间均为当地时间，涉及航次、班次、出发和到达时间如遇天气等原因导致不一致以当日航司信息公布为准！" type="warning" :closable="false">
											</el-alert>
											<div class="flight-content">
												<table>
													<tr>
														<th colspan="5">去</th>
													</tr>
													<tr>
														<td></td>
														<td>
															<p>亚洲大西洋</p>
															<p>HB803</p>
														</td>
														<td>
															<strong>10:25</strong>
															<p>沈阳桃仙机场</p>
														</td>
														<td>
															<hr />
														</td>
														<td>
															<strong>16:05</strong>
															<p>普吉国际机场</p>
														</td>
													</tr>
												</table>
												<table>
													<tr>
														<th colspan="5">返</th>
													</tr>
													<tr>
														<td></td>
														<td>
															<p>深圳航空</p>
															<p>ZH9016</p>
															<span>凌晨航班</span>
														</td>
														<td>
															<strong>02:50</strong>
															<p>普吉国际机场</p>
														</td>
														<td>
															<hr />
														</td>
														<td>
															<strong>07:40</strong>
															<p>深圳宝安机场</p>
														</td>
													</tr>
													<tr>
														<td><i class="el-icon-refresh"></i></td>
														<td>
															<p>深圳航空</p>
															<p>ZH9605</p>
														</td>
														<td>
															<strong>13:25</strong>
															<p>深圳宝安机场</p>
														</td>
														<td>
															<hr />
														</td>
														<td>
															<strong>17:25</strong>
															<p>沈阳桃仙机场</p>
														</td>
													</tr>
												</table>
											</div>
										</div>
										<div class="journey">
											<div class="z-tip">行程地图</div>
											<div class="map-content">
												<img src="img/map-temp.png" />
											</div>
											<div class="journey-content">
												<el-tabs v-model="activeName" @tab-click="handleClick">
													<el-tab-pane label="详细行程" name="first">
														<div class="jour-item">
															<div class="z-panel">
																<div class="z-panel-heading">
																	<span>第1天</span><span>沈阳<i class="fa fa-plane"></i>普吉岛</span><em>当天游玩主题：团队游行程</em>
																</div>
																<div class="z-panel-body">
																	<div>
																		<img src="img/content-icon/line.png" class="icon" />
																		<p class="text-lg">行程描述</p>
																		<div>
																			团友从中国乘机前往普吉岛。人们常这样描述，很少有一个地方，在你还没离开的时候就开始想她，以后仍会反反复复在梦中看到她，梦到彩色的贝壳、带条纹的热带鱼、随波摇曳的珊瑚花，在你周围环绕着。那梦中的海，是镶嵌在印度洋温暖水域的一串闪亮明珠，是阳光下泛着波光的湛蓝海面，是柔软细致的沙滩上情人们的脚印，是诗情画意的每一个黄昏晨曦。令人难以忘记的，应该就是那一片蓝，从沙滩近处的宝石绿，一直延伸到天边的妖姬蓝，而后加上蔚蓝的天空。好了，想她梦到她的原因，就是因为爱上她了，爱上了那风情万种的普吉岛。现在就让我们收拾好心情，准备迎接这趟跟蓝色主题有关的梦幻之旅吧！
																		</div>
																	</div>
																	<div>
																		<img src="img/content-icon/repast.png" class="icon" />
																		<p class="text-lg">餐饮</p>
																		<div>
																			<p>早餐：自理</p>
																			<p>中餐：自理</p>
																			<p>晚餐：自理</p>
																		</div>
																	</div>
																	<div>
																		<img src="img/content-icon/stay.png" class="icon" />
																		<p class="text-lg">住宿</p>
																		<div>
																			普吉岛芭东海滩芭曼布丽酒店Baumanburi（四钻）或同等钻级酒店
																		</div>
																	</div>
																</div>
															</div>
															<div class="z-panel">
																<div class="z-panel-heading">
																	<span>第2天</span><span>普吉岛</span><em>当天游玩主题：团队游行程</em>
																</div>
																<div class="z-panel-body">
																	<div>
																		<img src="img/content-icon/line.png" class="icon" />
																		<p class="text-lg">行程描述</p>
																		<div>
																			早餐后随即展开普吉的的风景【攀牙湾】『车程约60m』乘车前往有素有小桂林之称的攀牙湾【红树林】『20m』。我们换乘【长尾船】沿着007占士邦的路线驶向大海，迎面而来的就是令人赏心悦目的【海上盆景】『20m』。 特别赠送客人参加险刺激的【割喉岛泛舟之旅】『60m』（自费卖价800铢/人特别赠送。温馨提示请准备100铢/艇的小费给划艇员）。您将换乘两三人一组的小船，进入一个个山中溶洞。 午餐于【水上人家回教村】『60m』享用海鲜餐，完全在海上搭建而成的一个伊斯兰村落，也成了普吉岛的一个标志性景观。参观泰南水上人家同时，可远观美国电影《007金枪客》的占士帮铁钉岛。 随后参加我们特别为您安排的【沙法里之旅】『40m』（自费卖价600铢/人特别赠送）骑大象看猴子表演及割胶艺术。乘快艇前往探访此行的【蓝湾度假村】。该度假村是在长岛上新落成的沙滩酒店度假村，我公司安排住宿。团友乘坐快艇长驱直入抵达蓝湾沙滩，从沙滩上岸直接进房间入住。每一间房都直通酒店泳池，属于海景与泳池混合型VILLA房。酒店拥有大型餐厅、健身房、泳池、网球场、户外BBQ烧烤场等，更重要的是拥有三百米长的私家沙滩。
																		</div>
																	</div>
																	<div>
																		<img src="img/content-icon/repast.png" class="icon" />
																		<p class="text-lg">餐饮</p>
																		<div>
																			<p>早餐：包含 约40分钟 酒店内</p>
																			<p>中餐：包含 约60分钟 水上人家回教村</p>
																			<p>晚餐：包含 约60分钟 蓝湾中式料理</p>
																		</div>
																	</div>
																	<div>
																		<img src="img/content-icon/travel.png" class="icon" />
																		<p class="text-lg">攀牙湾</p>
																		<div>
																			攀牙湾(Phang-Nga)位于普吉岛东北75公里处，属于紧靠普吉岛的泰南大陆的攀牙府，是普吉岛及周边地区风景 美丽的地方。被誉为泰国的“小桂林”,这里遍布着诸多大小岛屿，怪石嶙峋，景色变幻万千，堪称“世界奇观”。其中，占士邦岛、铁钉岛、钟乳岛石洞更以其天然奇景而名声在外。尤其是占士邦岛，因为007系列电影曾在此取景，因此大家都不再注意小岛的本名TapuIsland，而称之为007岛，或者占士邦岛了。在这里，大家都会特别关注“大白菜石”，一块据说不久以后会消失的奇怪的石头。攀牙湾波光粼粼,呈淡绿色的海湾水面上，石灰岩奇峰怪石星罗棋布，有的从水中耸起数百米。许多岩岛看上去像驼峰，有些则像倒置栽种的芜菁。
																			<ul class="img-box clearfix">
																				<li>
																					<el-tooltip placement="top">
																						<div slot="content">
																							<img src="img/detail-slide/slide-1.png" alt="" />
																						</div>
																						<img src="img/detail-slide/slide-1.png" alt="" class="thumb" />
																					</el-tooltip>
																				</li>
																				<li>
																					<el-tooltip placement="top">
																						<div slot="content">
																							<img src="img/detail-slide/slide-2.png" alt="" />
																						</div>
																						<img src="img/detail-slide/slide-2.png" alt="" class="thumb" />
																					</el-tooltip>
																				</li>
																				<li>
																					<el-tooltip placement="top">
																						<div slot="content">
																							<img src="img/detail-slide/slide-3.png" alt="" />
																						</div>
																						<img src="img/detail-slide/slide-3.png" alt="" class="thumb" />
																					</el-tooltip>
																				</li>
																			</ul>
																		</div>
																	</div>
																	<div>
																		<img src="img/content-icon/stay.png" class="icon" />
																		<p class="text-lg">住宿</p>
																		<div>
																			普吉岛蓝湾沙滩别墅酒店BLUE BAY（5钻）或同钻级酒店
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</el-tab-pane>
													<el-tab-pane label="行程概要" name="second" class="jour-synopsis">
														<table>
															<tr>
																<th>行程</th>
																<th>用餐</th>
																<th>景点</th>
																<th>购物点</th>
																<th>酒店</th>
															</tr>
															<tr>
																<td>
																	<p>第1天</p>
																	<p>沈阳 -> 普吉岛</p>
																</td>
																<td>
																	<p>早餐: 自理</p>
																	<p>中餐: 自理</p>
																	<p>晚餐: 自理</p>
																</td>
																<td>
																	<p>暂无信息</p>
																</td>
																<td>
																	<p>无</p>
																</td>
																<td>
																	<p>入住：普吉岛芭东海滩芭曼布丽酒店Baumanburi（四钻）或同等钻级酒店</p>
																</td>
															</tr>
															<tr>
																<td>
																	<p>第2天</p>
																	<p>普吉岛</p>
																</td>
																<td>
																	<p>早餐: 包含</p>
																	<p>中餐: 包含</p>
																	<p>晚餐: 包含</p>
																</td>
																<td>
																	<p>攀牙湾</p>
																	<p>割喉岛</p>
																</td>
																<td>
																	<p>无</p>
																</td>
																<td>
																	<p>入住：普吉岛蓝湾沙滩别墅酒店BLUE BAY（5钻）或同钻级酒店</p>
																</td>
															</tr>
														</table>
													</el-tab-pane>
												</el-tabs>
											</div>
										</div>
									</div>
								</div>
								<!-- 行程介绍 end -->

								<!--费用包含 start -->
								<div class="include">
									<div class="tip">
										<p><i class="el-icon-star-on"></i>费用包含</p>
									</div>
									<div class="include-content">
										<div class="z-tip">费用包含</div>
										<ol>
											<li>机 票：交通全程往返团队经济舱机票含税费，联运机票预定后其中一程未乘坐，其他程也无法乘坐（团队机票一经开出，不得更改、不得签转、不得退票，如根据航空公司或出境社规定，机票可签转、改期或退票，我司可协助处理</li>
											<li>当地用车：空调旅游车，参团人数决定车型大小（自由活动期间除外）</li>
											<li>酒 店：行程中所列酒店或同类别酒店双人标准间</li>
											<li>用 餐：行程中所列团队标准用餐，如因自身原因放弃用餐，则餐费不退（行程中注明的自理餐除外）</li>
											<li>门 票：行程中标明的景点首道大门票</li>
										</ol>
										<div class="z-tip">费用不包含</div>
										<ol>
											<li>签证费：(450元/人 ) 2017年9月1日起落地签450/人，国内办理泰签请在官网单独找签证部门。9月1日起，导游服务出差费100泰铢/人/天（人民币20元/人/天），根据泰国规定，此项费用需要境外与导游结算</li>
											<li>单房差：个人全程单房差现询</li>
											<li>交通：出发地至集合地的交通等非行程安排的交通</li>
											<li>个人消费：购物等个人消费以及因个人疏忽、违章或违法引起的经济损失或赔偿费用</li>
											<li>行李费：全程额外行李托运及超重费用；境外内陆段行李托运及超重费用。行李费：全程额外行李托运及超重费用；境外内陆段行李托运及超重费用</li>
											<li>保险费：建议购买旅游人身意外保险</li>
											<li>航空公司临时调整燃油附加税及相关费用</li>
											<li>因交通延阻、战争、政变、罢工、天气、飞机机器故障、航班取消或更改时间等不可抗力原因所引致的额外费用</li>
											<li>出入境个人物品海关征税</li>
										</ol>
										<div class="z-tip">退规说明</div>
										<ol>
											<li>
												旅游者在行程开始前30日以内提出解除合同的，按下列标准扣除必要的费用：<br /> 行程开始前 29 日至 15 日，按旅游费用总额的 5%；<br /> 行程开始前 14 日至 7 日，按旅游费用总额的 20%；<br /> 行程开始前 6 日至 4 日，按旅游费用总额的 50%；<br /> 行程开始前 3 日至 1 日，按旅游费用总额的 60%；<br /> 行程开始当日，按旅游费用总额的 70%。
											</li>
										</ol>
									</div>
								</div>
								<!--费用包含 end-->

								<!-- 签证信息 start -->
								<div class="visa">
									<div class="tip">
										<p><i class="el-icon-star-on"></i>签证信息</p>
									</div>
									<div class="visa-content">
										<div class="visa-info">
											<p>办签国家： 泰国</p>
											<p>签证类型： 个人旅游签证</p>
											<p>办理时长： 送签后7个工作日(收齐资料1个工作日 + 制作材料1个工作日 + 预约录指纹1个工作日 + 预约面试1个工作日 + 送签1个工作日 + 使馆受理1个工作日 + 出签邮寄1个工作日)</p>
											<p>受理范围： 广州领区</p>
										</div>
										<div class="z-tip">材料收取截止时间</div>
										<table class="cut-off">
											<tr>
												<th>出发班期</th>
												<th>截止收取材料时间</th>
												<th>出发班期</th>
												<th>截止收取材料时间</th>
											</tr>
											<tr>
												<td>2017-12-17</td>
												<td>2017-12-06 下午17点30之前</td>
												<td>2017-12-21</td>
												<td>2017-12-12 下午17点30之前</td>
											</tr>
											<tr>
												<td>2017-12-24</td>
												<td>2017-12-13 下午17点30之前</td>
												<td>2017-12-28</td>
												<td>2017-12-19 下午17点30之前</td>
											</tr>
											<tr>
												<td>2017-12-31</td>
												<td>2017-12-20 下午17点30之前</td>
												<td>2017-01-04</td>
												<td>2017-12-26 下午17点30之前</td>
											</tr>
										</table>
										<div class="z-tip">所需材料</div>
										<table class="information">
											<tr>
												<th colspan="2">*必须提供（共2项）</th>
											</tr>
											<tr>
												<td>身份证正反面复印件【复印件】</td>
												<td>
													<p>（1）身份证正反面复印在同一A4纸上，后面备注好办理人的联系方式</p>
													<p>（2）临时身份证不能用</p>
												</td>
											</tr>
											<tr>
												<td>☆身份证明资料【原件】</td>
												<td>
													<p>自由职业者除以上材料外，还需提供如下材料：</p>
													<p>（1）居委会或村委会证明原件，注明现居住地，说明资金来源，并提供出资人的单位信息资料（包括个人资料表、营业执照、信笺）</p>
													<p>（2）如已婚，则还需要提供配偶的在职证明原件，配偶近6个月的银行对账单，如配偶一同出行，则两人不得共用一份材料。</p>
													<p>（3）经外交部认证的结婚证公证书。</p>
												</td>
											</tr>
										</table>
									</div>
								</div>
								<!-- 签证信息 end -->

								<!--预定须知 start -->
								<div class="reserve">
									<div class="tip">
										<p><i class="el-icon-star-on"></i>预定须知</p>
									</div>
									<div class="reserve-content">
										<div class="z-tip">签约方式</div>
										<div>
											<ol>
												<li>邮件签约：付款成功后，将通过电子邮件将电子版合同发送至您的邮箱，与门市签约及传真签约同等有效。</li>
												<li>电子签约：同程官网在线下单，通过在线签约页面直接完成签约。</li>
												<li>门店签约：前往同程设在各城市的门店进行线下签约付款。</li>
											</ol>
										</div>
										<div class="z-tip">付款方式</div>
										<div>
											<ol>
												<li>【网上支付】<br /> A、下载APP，支持微信支付、支付宝支付、信用卡支付、银联支付
													<br /> B、旅游网站在线支付微信扫码支付、支付宝支付、信用卡支付、网银支付、银联支付
												</li>
												<li>【对公汇款】<br /> 通过银行将相关款项汇至指定对公账户
												</li>
												<li>【门市支付】<br /> 为了您的支付方便和安全性，请优先选择刷卡支付，现金支付
												</li>
											</ol>
										</div>
										<div class="z-tip">重要提醒</div>
										<div>
											<ol>
												<li>为了确保您能够按时出行，产品确认后请在24小时内付款，同时请按要求尽快提供出游所需的材料并签订出境旅游合同</li>
												<li>请在报名时交纳团款，我方收到团款后保留机位，非拒签原因客人取消行程，机票定金以及产生的签证费用将不予退还；无论客人是否参加面试，领馆将不予退还签证费。若签证出来后,由于客人的原因在出团前取消,根据情况,收取损失费用</li>
												<li>所有团队达到成团标准人数即成团，未达到标准我社有权利调整出发日期或取消团期，提前1个月通知</li>
											</ol>
										</div>
										<div class="z-tip">安全须知</div>
										<div>
											<p>
												为了增强旅游者安全意识，普及旅游安全基本常识，普及文明行为公约指南，使旅游者参加旅游活动的计划能圆满、愉快、顺利完成，请您仔细阅读安全指南及文明行为公约指南。 为了确保旅游顺利出行，防止旅途中发生人身意外伤害事故，请旅游者在出行前做一次必要的身体检查，如存在下列情况，暂时无法接待：
											</p>
											<ol>
												<li>传染性疾病患者，如传染性肝炎、活动期肺结核、伤寒等传染病人</li>
												<li>心血管疾病患者，如严重高血压、心功能不全、心肌缺氧、心肌梗塞等病人</li>
												<li>脑血管疾病患者，如脑栓塞、脑出血、脑肿瘤等病人</li>
											</ol>
										</div>
									</div>
								</div>
								<!--预定须知 end -->

								<!-- 用户点评 start -->
								<div class="comment">
									<div class="tip">
										<p><i class="el-icon-star-on"></i>用户点评</p>
									</div>
									<div class="comment-content">
										<div class="comm-head">
											<ul class="clearfix">
												<li class="satisfaction">
													<div>
														<p><strong>100</strong><em>%</em></p>
														<span>满意度</span>
													</div>
													<div>
														好评：
														<el-progress :stroke-width="10" :percentage="98"></el-progress>
														中评：
														<el-progress :stroke-width="10" :percentage="2"></el-progress>
														差评：
														<el-progress :stroke-width="10" :percentage="0"></el-progress>
													</div>
													<div class="clearfix"></div>
												</li>
												<li></li>
												<li></li>
											</ul>
										</div>
									</div>
								</div>
								<!-- 用户点评 end -->
							</div>
						</el-col>
					</el-row>
					<!-- 详细信息 end -->
				</el-col>
			</el-row>
			<!-- 内容部分 end -->

			<!-- 页脚 start -->
			<footer>
				<!-- 底部 start -->
				<el-row>
					<el-col :span="24" id="bottom-box">
						<el-row type="flex" justify="center" id="">
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom1.png" />
								<span>价格公正，安心购买</span>
							</el-col>
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom2.png" />
								<span>品质保证，放心出行</span>
							</el-col>
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom3.png" />
								<span>产品丰富，一站式服务</span>
							</el-col>
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom4.png" />
								<span>专业顾问，24小时客服</span>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<!-- 底部 end -->
				<el-row type="flex" justify="center">
					<el-col :sm="16">
						<span>Copyright &copy; 2017 - 2018 版权所有 沈阳畅星软件有限公司</span>
					</el-col>
				</el-row>
			</footer>
			<!-- 页脚 end -->
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: '#container',
			data: {
				activeIndex: 1,
				activeName: 'first',
				num1: 1,
				num2: 0,

			},
			methods: {
				handleClick(tab, event) {
					console.log(tab, event);
				},
				handleSelect(key, keyPath) {
					console.log(key, keyPath);
				},
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				},
				handleChange(value) {
					console.log(value);
				},
				onSubmit() {
					console.log('submit!');
				}

			}
		})
	</script>

</html>